<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layer-更懂你的web弹窗解决方案</title>
    <script src="jQuery-1.12.3.js"></script>
    <link rel="stylesheet" href="layer.css">
    <script src="layer.js"></script>
</head>
<body>
<button class="msg-btn">弹出后1秒消失</button>
<button class="confirm-btn">两个选项的提示框</button>
<button class="alert-btn">一个按钮的提示框</button>
<button class="content-btn">有html的提示框</button>
<div>
    <p>以下这张图，从左往右，在js中使用时：</p>
    <p>表情提示图标序号依次是从左往右：0.1.2.3.4.5.6.7</p>
</div>
<img src="icon.png" alt="" style="width: 250px;">
<script>
$(function () {
    // 弹出后自动1秒消失
    $(".msg-btn").click(function () {
        layer.msg(
            '删除成功'
        );
    });

    // 弹出后自定义按钮内容及方法
    $(".confirm-btn").click(function () {
        layer.confirm(
            '你今天吃午饭了么？', {
            btn: ['吃了','没吃'] //按钮
        }, function(){
            layer.msg(
                '怪不得你胖了呢！', {
                    icon: 3
                });
        }, function(){
            layer.msg(
                '那你晚饭多吃点吧', {
                time: 2000, //2s后自动关闭//2s后自动关闭.默认为1000，也就是1秒,1s的时候可以不写
                btn: ['我减肥！', '知道了']
            });
        });
    });

    //alert弹出后一个自定义按钮
    $(".alert-btn").click(function () {
        layer.alert('墨绿风格，点击确认看深蓝', {
            //样式类名，这个class是框架自带的class，如果需要更改颜色，或者更改风格，可以直接增加（更换）class名称，
            skin: 'layui-layer-molv',
            //关闭按钮的图标，
            // 0：空，
            // 1：第2行第一个图标。2：第2行倒数第二个图标，鼠标放上去后为第2行倒数第1个图标
            closeBtn: 1
        }, function(){
            layer.alert('偶吧深蓝style', {
                skin: 'layui-layer-lan',
                closeBtn: 1,
                //动画类型，
                //1: 从页面上往下弹出
                //2: 从页面下往上弹出
                //3: 从左往右移动进入页面中心弹出
                //4: 旋转，进入弹出
                //5: 瞬间弹出
                anim: 4
            });
        });
    });

    //页面层
    $(".content-btn").click(function () {
        layer.open({
            //这是type类型，
            // 0：有按钮，
            // 1：内容区域没有padding，靠近边框展示
            // 2：当type等于2的时候，content里面需要的是一个写好的模态框，也就是iframe的url
            type: 0,
            title: '这是头部',
            shadeClose: true,
            shade: 0.8,
            skin: 'layui-layer-rim', //加上边框
            area: ['420px', '240px'], //宽高
            content: 'html内容'
        });
    })
})
</script>
</body>
</html>